<template>
  <div class="home">
    <!--饼状图-->
    <div class="quarter"
         ref="pieBox"
         v-show="pieBoxVisible">
      <i v-if="!pieBoxMaxFlag"
         aria-hidden="true"
         class=" el-icon fa fa-expand"
         title="最大化"
         @click="handleToMaximize('pieBox')"></i>
      <i v-if="pieBoxMaxFlag"
         aria-hidden="true"
         class=" el-icon fa fa-compress"
         title="最小化"
         @click="handleToMaximize('pieBox')"></i>
      <chart-pie ref="pie"
                 v-if="objectStatisticsFlag"
                 :data="objectCountData"></chart-pie>
    </div>
    <!--柱状图-->
    <div class="quarter"
         ref="barBox"
         v-show="barBoxVisible">
      <i v-if="!barBoxMaxFlag"
         aria-hidden="true"
         class=" el-icon fa fa-expand"
         title="最大化"
         @click="handleToMaximize('barBox')"></i>
      <i v-if="barBoxMaxFlag"
         aria-hidden="true"
         class=" el-icon fa fa-compress"
         title="最小化"
         @click="handleToMaximize('barBox')"></i>

      <chart-bar ref="bar"
                 v-if="instanceStatisticsFlag"
                 :data="instanceCountData"></chart-bar>
    </div>
    <div class="quarter"
         ref="graphBox"
         v-show="graphBoxVisible">
      <i v-if="!graphBoxMaxFlag"
         aria-hidden="true"
         class=" el-icon fa fa-expand"
         title="最大化"
         @click="handleToMaximize('graphBox')"></i>
      <i v-if="graphBoxMaxFlag"
         aria-hidden="true"
         class=" el-icon fa fa-compress"
         title="最小化"
         @click="handleToMaximize('graphBox')"></i>
      <!--关系图-->
      <chart-graph ref="graph"
                   v-if="relationStatisticsFlag"
                   :data="relationData"></chart-graph>
    </div>
    <div class="quarter"
         ref="treeBox"
         v-show="treeBoxVisible">
      <i v-if="!treeBoxMaxFlag"
         aria-hidden="true"
         class=" el-icon fa fa-expand"
         title="最大化"
         @click="handleToMaximize('treeBox')"></i>
      <i v-if="treeBoxMaxFlag"
         aria-hidden="true"
         class=" el-icon fa fa-compress"
         title="最小化"
         @click="handleToMaximize('treeBox')"></i>

      <!--树状图-->
      <chart-tree ref="tree"
                  v-if="propertyStatisticsFlag"
                  :data="propertyData"></chart-tree>
    </div>

  </div>
</template>
<script>
import { getObjectCount, getInstanceCount, getRelationList, getPropertyList } from '@/api/statistics'
import { ChartPie, ChartBar, ChartGraph, ChartTree } from '@/components/charts'
export default {
    data () {
        return {
            // 对象分类数据量统计标识符
            objectStatisticsFlag: false,
            // 对象分类数据量统计数据
            objectCountData: [],
            // 对象是咧数据量统计数据
            instanceCountData: [],
            // 对象是咧数据量统计标识符
            instanceStatisticsFlag: false,
            // 对象关系统计数据
            relationData: [],
            // 对象关系统计标识符
            relationStatisticsFlag: false,
            // 对象属性分析数据
            propertyData: [],
            // 对象属性分析标识符
            propertyStatisticsFlag: false,
            // 饼状图是否最大化标识
            pieBoxMaxFlag: false,
            // 柱状图是否最大化标识
            barBoxMaxFlag: false,
            // 关系图是否最大化标识
            graphBoxMaxFlag: false,
            // 树状图是否最大化标识
            treeBoxMaxFlag: false,
            // 饼状图是否显示标识
            pieBoxVisible: true,
            // 柱状图是否显示标识
            barBoxVisible: true,
            // 关系图是否显示标识
            graphBoxVisible: true,
            // 树状图是否显示标识
            treeBoxVisible: true
        }
    },
    created () {
        this.getObjectCount()
        this.getInstanceCount()
        this.getRelationList()
        this.getPropertyList()
    },
    components: {
        ChartPie,
        ChartBar,
        ChartGraph,
        ChartTree
    },
    mounted () {
    // 防止页面后退
    // history.pushState(null, null, document.URL)
    // window.addEventListener('popstate', function () {
    //     history.pushState(null, null, document.URL)
    // })
    // 监听浏览器尺寸的变化
        window.addEventListener('resize', this.handleResize, false)
    },
    destroyed () {
        window.removeEventListener('resize', this.handleResize, false)
    },
    methods: {
    // 浏览器尺寸变化事件
        handleResize () {
            this.$refs.pie.resize()
            this.$refs.bar.resize()
            this.$refs.graph.resize()
            this.$refs.tree.resize()
        },
        // 最大化
        handleToMaximize (box) {
            let target = this.$refs[box]
            switch (box) {
            case 'pieBox':
                if (!this.pieBoxMaxFlag) {
                    target.style.width = '100%'
                    target.style.height = '100%'
                    this.pieBoxVisible = true
                    this.barBoxVisible = false
                    this.graphBoxVisible = false
                    this.treeBoxVisible = false
                } else {
                    target.style.width = '50%'
                    target.style.height = '50%'
                    this.pieBoxVisible = true
                    this.barBoxVisible = true
                    this.graphBoxVisible = true
                    this.treeBoxVisible = true
                }
                this.pieBoxMaxFlag = !this.pieBoxMaxFlag
                break
            case 'barBox':
                if (!this.barBoxMaxFlag) {
                    target.style.width = '100%'
                    target.style.height = '100%'
                    this.barBoxVisible = true
                    this.pieBoxVisible = false
                    this.graphBoxVisible = false
                    this.treeBoxVisible = false
                } else {
                    target.style.width = '50%'
                    target.style.height = '50%'
                    this.barBoxVisible = true
                    this.pieBoxVisible = true
                    this.graphBoxVisible = true
                    this.treeBoxVisible = true
                }
                this.barBoxMaxFlag = !this.barBoxMaxFlag
                break
            case 'graphBox':
                if (!this.graphBoxMaxFlag) {
                    target.style.width = '100%'
                    target.style.height = '100%'
                    this.graphBoxVisible = true
                    this.pieBoxVisible = false
                    this.barBoxVisible = false
                    this.treeBoxVisible = false
                } else {
                    target.style.width = '50%'
                    target.style.height = '50%'
                    this.graphBoxVisible = true
                    this.pieBoxVisible = true
                    this.barBoxVisible = true
                    this.treeBoxVisible = true
                }
                this.graphBoxMaxFlag = !this.graphBoxMaxFlag
                break
            default:
                if (!this.treeBoxMaxFlag) {
                    target.style.width = '100%'
                    target.style.height = '100%'
                    this.treeBoxVisible = true
                    this.pieBoxVisible = false
                    this.barBoxVisible = false
                    this.graphBoxVisible = false
                } else {
                    target.style.width = '50%'
                    target.style.height = '50%'
                    this.treeBoxVisible = true
                    this.pieBoxVisible = true
                    this.barBoxVisible = true
                    this.graphBoxVisible = true
                }
                this.treeBoxMaxFlag = !this.treeBoxMaxFlag
            }

            this.$refs.pie.resize()
            this.$refs.bar.resize()
            this.$refs.graph.resize()
            this.$refs.tree.resize()
        },
        // 获取对象的数量
        getObjectCount () {
            getObjectCount().then(response => {
                let data = response.data
                this.objectCountData.push({ value: data.countEntity, name: '实体' })
                this.objectCountData.push({ value: data.countEvent, name: '事件' })
                this.objectCountData.push({ value: data.countDocument, name: '文档' })
                this.objectCountData.push({ value: data.countMedia, name: '多媒体' })
                this.objectStatisticsFlag = true
            })
        },
        // 获取对象实例的数量
        getInstanceCount () {
            getInstanceCount().then(response => {
                this.instanceCountData = response.data
                this.instanceStatisticsFlag = true
            })
        },
        // 获取对象关系列表
        getRelationList () {
            getRelationList().then(response => {
                this.relationData = response.data
                this.relationStatisticsFlag = true
            })
        },
        // 获取对象属性列表
        getPropertyList () {
            getPropertyList().then(response => {
                this.propertyData = response.data
                this.propertyStatisticsFlag = true
            })
        }
    }

}
</script>
<style lang="less" scoped>
.home {
	width: 100%;
	height: 100%;
	position: absolute;
	.quarter {
		position: relative;
		width: 50%;
		height: 50%;
		float: left;
	}
	.el-icon {
		position: absolute;
		top: 20px;
		right: 20px;
		cursor: pointer;
		font-size: 24px;
		z-index: 1000;
	}
}
</style>
